<%@ include file="../common/IncludeTop.jsp"%>

<div id="BackLink">
	<a href="main">Return to Main Menu</a>
</div>

<script type = "text/javascript">
	function Update(data) {
		//alert(data);
		var quantity = document.getElementById(data).value;
		//alert(itemId);
		 var listprice = document.getElementById(data+"listPrice").innerText;
		 //alert(listprice);
		$.ajax({
			type  : "GET",
			url   : "updateCartQuantities?itemId="+data+"&quantity="+quantity,
			success : function () {
				//alert("Success");
				//alert(listprice*quantity);
				$('#'+data+"total").text(listprice*quantity);
			}
		});
	}
</script>

<div id="Catalog">

	<div id="Cart">

		<h3>Shopping Cart</h3>
<%--		<form action="updateCartQuantities" method="post">--%>
		<form action="#" method="post">
			<table>
				<tr>
					<th><b>Item ID</b></th>
					<th><b>Product ID</b></th>
					<th><b>Description</b></th>
					<th><b>In Stock?</b></th>
					<th><b>Quantity</b></th>
					<th><b>List Price($)</b></th>
					<th><b>Total Cost($)</b></th>
					<th>&nbsp;</th>
				</tr>

				<c:if test="${sessionScope.cart.numberOfItems == 0}">
					<tr>
						<td colspan="8"><b>Your cart is empty.</b></td>
					</tr>
				</c:if>

				<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
					<tr>
						<td>
							<a href="viewItem?itemId=${cartItem.item.itemId}">${cartItem.item.itemId}</a>
						</td>
						<td>
								${cartItem.item.product.productId}
						</td>
						<td>
								${cartItem.item.attribute1} ${cartItem.item.attribute2}
								${cartItem.item.attribute3} ${cartItem.item.attribute4}
								${cartItem.item.attribute5} ${cartItem.item.product.name}
						</td>
						<td>
								${cartItem.inStock}
						</td>
						<td>
							<input id="${cartItem.item.itemId}" type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}" onblur="Update('${cartItem.item.itemId}')"/>
						</td>
						<td id="${cartItem.item.itemId}listPrice">
<%--							<fmt:formatNumber  value="${cartItem.item.listPrice}" pattern="$#,##0.00" />--%>
		${cartItem.item.listPrice}
						</td>
						<td id="${cartItem.item.itemId}total">
<%--							<fmt:formatNumber value="${cartItem.total}" pattern="$#,##0.00" />--%>
		${cartItem.total}
						</td>
						<td>
							<a href="removeItemFormCart?workingItemId=${cartItem.item.itemId}" class="Button">Remove</a>
						</td>
					</tr>
				</c:forEach>
<%--				<tr>--%>
<%--					<td colspan="7">--%>
<%--						<input type="button" value="Update Cart" onclick="UpdateCart()"/>--%>
<%--&lt;%&ndash;						<input type="submit" value="Update Cart" />&ndash;%&gt;--%>

<%--					</td>--%>
<%--					<td>&nbsp;</td>--%>
<%--				</tr>--%>
			</table>
		</form>

		<c:if test="${sessionScope.cart.numberOfItems > 0}">
			<a href="newOrderForm?itemId=${cartItem.item.itemId}" class="Button">Proceed to Checkout</a>
		</c:if>
	</div>

	<div id="Separator">&nbsp;</div>
</div>


<%@ include file="../common/IncludeBottom.jsp"%>